<template>
  <div class="page">
    <div class="login-way" v-show="!isBinding">
      <div class="way-item">
        <div class="phone">
          <div class="label">手机号</div>
          <div class="number">{{ userInfo.phone }}</div>
          <el-button @click="modify">修改</el-button>
        </div>
      </div>
      <div class="way-item">其他登录方式</div>
      <div class="way-item">
        <div class="wx">
          <div class="label">微信</div>
          <div class="number">
            <span v-if="userInfo.bindWechat">{{ userInfo.nickname }}</span>
            <span v-else style="color: rgb(192, 196, 204)">未绑定微信</span>
          </div>
          <el-button @click="binding">绑定</el-button>
        </div>
      </div>
      <div class="button">
        <el-button @click="logOut">退出登录</el-button>
      </div>
      <modify @close="closeModify" :isModify="isModify"></modify>
      <!--      <binding @close="closeBinding" :isBinding="isBinding"></binding>-->
    </div>
    <div class="bind" v-show="isBinding">
      <div id="login_container"></div>
      <el-button type="primary" @click="isBinding=false">返回</el-button>
    </div>
  </div>
</template>

<script>
// import Binding from '@/framework/components/dialog/user/info/binding'
import Modify from "@/framework/components/dialog/user/info/modify";
import { findWithMe } from '@/project/service/manager'
import {authenticateByOpenCode} from "@/project/service/manager";
import '@/framework/utils/wxLogin'
// import

export default {
  name: 'RealName',
  props: {
    userInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      // value: '',
      phone: '',
      isBinding: false, //是否修改绑定微信
      isModify: false, //是否修改绑定手机号码
    }
  },
  components:{ Modify },
  watch: {
    isBinding(val){
      if(val == true){
        this.wechatLogin()
      }
    },
    //监听url的变化
    $route:{
      handler(val){
        console.log('路径变化')
        console.log('授权码：'+val.query.code)
        //如果地址栏发生改变，该函数会执行
        //获取微信临时授权code
        this.platformCode = val.query.code
        if(this.platformCode) {
          this.handleWechatLogin()
        }
      }
    }
  },
  methods: {
    //展示二维码
    wechatLogin() {
      let that = this
      new WxLogin({
        self_redirect: false,
        id: "login_container",
        appid: "wxce06ae7064d6529c",
        scope: "snsapi_login",
        // redirect_uri: encodeURIComponent(that.$store.state.targetUrl + '/login'),
        redirect_uri: encodeURIComponent(that.$store.state.targetUrl + '/user/info'),
        state: "",
        style: ""
      })
    },
    // //微信登录
    // handleWechatLogin() {
    //   console.log('请求前')
    //   authenticateByOpenCode({platformCode: this.platformCode}, token=> {
    //     console.log('登录返回：')
    //     console.log(token)
    //     localStorage.setItem('agent_live_web_token', token)
    //     this.findWithMe()
    //     // this.$router.push('/login/bind/'+this.platformCode)
    //   })
    // },
    // 修改手机号
    modify(){
      this.isModify = true
    },
    // 绑定微信
    binding(){
      this.isBinding = true
    },
    //关闭修改手机号对话框
    closeModify(isModify){
      this.isModify = isModify
    },
    //关闭绑定微信对话框
    closeBinding(isBinding){
      this.isBinding = isBinding
    },
    //退出登录
    logOut(){
      // this.$post('api/manager/logout', {}, res => {
      //   this.$message.success('退出成功')
      //   // 清除缓存
      //   localStorage.removeItem('system_userCache')
      //   // localStorage.removeItem('IMinfo')
      //   localStorage.removeItem('manager_web_token')
      //   localStorage.removeItem('currentChatId')
      //   sessionStorage.clear()
      //   // 退出环信
      //   // this.$imconn.close()
      //   this.$router.push({path: '/login'})
      // })

      this.$post('api/agent/logout', {}, res => {
        this.$message.success('退出成功')
        // 清除缓存
        // localStorage.removeItem('system_userCache')
        // localStorage.removeItem('IMinfo')
        localStorage.removeItem('agent_live_web_token')
        // localStorage.removeItem('currentChatId')
        sessionStorage.clear()
        // 退出环信
        // this.$imconn.close()
        this.$router.push({path: '/login'})
      })
    }
  }
}
</script>

<style lang="less" scoped>

.login-way{
  width: 100%;

  .way-item{
    width:100%;
    margin-bottom: 30px;

    .phone{
      width: 100%;
      display: flex;
      align-items: center;

      .label{
        margin-right: 50px;
        width: 100px;
      }

      .number{
        width: 150px;
      }
    }

    .wx{
      width: 100%;
      display: flex;
      align-items: center;

      .label{
        margin-right: 50px;
        width: 100px;
      }

      .number{
        width: 150px;
      }
    }
  }

  .button{
    display: flex;
    justify-content: center;

    .el-button{
      width: 200px !important;
    }
  }
}

.bind{
  width: 100%;
  text-align: center;
}

</style>
